<!doctype html>
<html lang="cn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <!--<title>Document</title>-->
    <link rel="stylesheet" href="/static/app/lib/iconfont/iconfont.css">
    <link rel="stylesheet" href="/static/app/css/style.css">
    <!--时间插件-->
    <link rel="stylesheet" type="text/css" href="/static/shijian/css/date.css">


    <script src="/static/app/lib/zy.rem.js"></script>
    <script src="/static/app/lib/jquery1.12.3.min.js"></script>
    <script src="/static/app/js/base.js"></script>
    <!--时间插件-->
    <script type="text/javascript" src="/static/shijian/js/date.js"></script>
    <script type="text/javascript" src="/static/shijian/js/iscroll_date.js"></script>
    <style>
        .bottom-center{
            width:100%;
            height: 1rem;
            border-bottom: 0.0002rem solid #ccc;
            background-color: #fff;
            /*position:absolute;*/
            /*bottom: 2.28rem;*/
            z-index:999;
            opacity:0.85;
        }
        .bottom{
            width:100%;
            height: 1.3rem;
            border-bottom: 1px solid #ccc;
            background-color: #fff;
            /*position:absolute;*/
            bottom: 0.96rem;
            z-index:999;
            /*opacity:0.85;*/
        }
        .address{
            margin-top: 0.15rem;
            margin-left: 0.2rem;
            font-size: 0.26rem;
        }
        .getime{
              margin-top: 0.3rem;
              margin-left: 0.2rem;
              font-size: 0.262rem;
              color: #666;
            display: inline-block;
          }
        .type{
            margin-top: 0.1rem;
            margin-left: 0.2rem;
            font-size: 0.262rem;
            color: #666;
            display: inline-block;
        }
        span{
            margin-left: 0.1rem;
        }
        .annun{
            margin-top: 0.2rem;
            display: inline-block;
            /*margin-left: 0.5rem;*/
        }
        .tishi{
            width: 100%;
            font-size: 0.3rem;
            color: #fff;
            background-color: rgba(37, 37, 37, 0.62);
            text-align: center;
            padding-top: 3%;
            padding-bottom: 3%;
            z-index: 3;
            position: absolute;
            display: none;
            top: .9rem;
        }

        #dateinput{
            width: 33%;
            display: block;
            margin: 5px auto;
            font-size: 12px;
            text-align: center;
            background-color: #4a9658;
            color: #fff;
            border: 0;
            outline:none
        }


        .fdfd{
            width: 25%;
            margin-left: 1%;
            border-bottom: 0.002rem solid #ccc;
            background-color: #fff;
            position: absolute;
            top: 0.9rem;
            z-index: 1000;
            opacity: 0.85;
             display: none;
        }
        .dffs{
            margin-left: 0.3rem;
            margin-top: 0.3rem;
            font-size: 0.3rem;
            color: #000;
        }
        .namess{
            margin-left: 0.3rem;
            margin-top: 0.3rem;
            font-size: 0.3rem;
            /*border-bottom: 0.001rem solid #ccc;*/
            color: #000;
        }
        #setcancle ul li {
            color: #000;
        }
        .as{
          font-size: 0.25rem;
        }



        /* 下拉按钮样式 */
        .dropbtn {
            background-color: #1f201f;
            color: white;
            font-size: 0.3rem;
            width: 0.8rem;
            border: none;
            cursor: pointer;
            border-radius: 0.5rem;
            outline: none;
        }

        /* 容器 <div> - 需要定位下拉内容 */
        .dropdown {
            position: relative;
            display: inline-block;
            bottom: 0.2rem;
            left: 2.5rem;
        }

        /* 下拉内容 (默认隐藏) */
        .dropdown-content {
            display: none;
            position: absolute;
            background-color: #1f201f;
            min-width: 0.2rem;
            box-shadow: 0 0.2rem 0.2rem 0 rgba(0,0,0,0.2);
            bottom: 0.4rem;
            border-radius: 0.5rem;
        }

        /* 下拉菜单的链接 */
        .dropdown-content a {
            color: #fff;
            padding: 0.2rem 0.25rem;
            text-decoration: none;
            display: block;
            border-radius: 0.5rem;
        }

        /* 鼠标移上去后修改下拉菜单链接颜色 */
        .dropdown-content a:hover {background-color: #f1f1f1}
        
        /* 当下拉内容显示后修改下拉按钮的背景颜色 */
        .dropdown:hover .dropbtn {
            background-color: #181717;
        }
    </style>
</head>
<!--<body data-type="widgets" onload="init();">-->
<body data-type="widgets">
<div class="header">
    <div onclick="ddfg();" class="as">设备</div><img src="/static/app/img/xia2.png">
    <div id="datePlugin"></div>
    <!--<img src="/static/app/img/xia2.png">-->
    <!--时间选择-->
    <input type="hidden" class="gettime" name="shijian" value="">
    <input type="text" id="dateinput" name="dateinput" value="" />
    <div><a href="javascript:;" class="head-btn iconfont"></a></div>
</div>
<!--设备选择-->
<div class="fdfd" style="padding:0;">
    <!--<div class="dffs">当 前 的 设 备:</div>-->
    {foreach name="dev_nick" key="key" item="v"}
    <div class="namess" data-val="{$v.id}" onclick="xuhu(this,{$v.name})">{$v.nickname}</div>
    {/foreach}
    <input type="hidden" name="imei" id="imei" value="{$name}">
</div>

<div class="tishi">没有查询到轨迹</div>
<div id="container" style="width:100%; height:11.5rem"></div>
<!--</div>-->
<div id="controller" class="bottom-center" align="center">
    <div id="pause" class="annun pause" onclick="pause();"><img src="/static/app/img/zt.png"></div>
    <div id="play" class="annun" onclick="play();" ><img src="/static/app/img/bo.png"></div>
    <div class="dropdown">
        <div class="dropdown-content">
            <a href="#" onclick="tiaoje(this,'快','500')" data-val="快">快</a>
            <a href="#" onclick="tiaoje(this,'中','750')" data-val="中">中</a>
            <a href="#" onclick="tiaoje(this,'慢','1000')" data-val="慢">慢</a>
        </div>
        <button class="dropbtn" onclick="sudu()">中</button>
    </div>
    <!--<div id="reset" class="annun" onclick="reset()"><img src="/static/app/img/cz.png"></div>-->
</div>
<div class="bottom" style=" display: inline-block;">
    <div class="address"></div>
    <div class="getime"></div>
    <div class="type">定位模式:<span ></span></div>
</div>
{include file='public:bottom'}
</body>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=2COzFaICuIyVj7V3VetKfmdRVnX8BhVr"></script><!--百度地图api-->
<script type="text/javascript" src="/static/baidumap/js/jquery.bdmap.js"></script><!--百度地图API模块化成函数供前台调用-->
<script type="text/javascript">

    //初始化日期插件
    $('#dateinput').date();
    $data =getParam('gettime');
    $imeihao =getParam('imei');
   if(!$data){
       var myDate = new Date;
       var year = myDate.getFullYear(); //获取当前年
       var mon = myDate.getMonth() + 1; //获取当前月
       var date = myDate.getDate(); //获取当前日
       $("#dateinput").val(year + "-" + mon + "-" + date);
       $(".gettime").val(year + "-" + mon + "-" + date);
   }else {
       $('#imei').val($imeihao);
       $("#dateinput").val($data);
       $(".gettime").val($data);
   }
      $shudu =750;
    //播放速度
    function tiaoje(obj,name,shu) {
        $('.dropdown-content').css('display','none');
        $('.dropbtn').text(name);
        $shudu =shu;
    }
    
    $('#pause').css('display','none')
        //判断是否有轨迹（有）
        if({$list}.data.length !=0){
            var points = [];
            var address =[];
            var time=[];
            var wifi=[];
            $.each({$list}.data, function(i,val){
                points.push( new BMap.Point(val.longitude, val.latitude));
                address.push(val.address)
                time.push(val.createTime)
                wifi.push(val.type)
            });
        init();
        $('.address').text(address[0]);
        $('.getime').text(time[0]);
        $('.type span').text(wifi[0]);
        var map;   //百度地图对象
        var car ;   //汽车图标
        var label; //信息标签
        var centerPoint;

        var timer;     //定时器
        var index = 0; //记录播放到第几个point

        var  playBtn, pauseBtn, resetBtn; //几个控制按钮

        function init() {

            playBtn = document.getElementById("play");
            pauseBtn = document.getElementById("pause");
            resetBtn = document.getElementById("reset");

            //初始化地图,选取第一个点为起始点
            map = new BMap.Map("container");
//            console.log(points[0]);
            map.centerAndZoom(points[0], 14);
            //卫星地图切换
            var mapType1 = new BMap.MapTypeControl({mapTypes: [BMAP_NORMAL_MAP, BMAP_HYBRID_MAP]});
            //添加地图类型和缩略图
            map.addControl(mapType1);//2D图，卫星图
            var linePoints = [];
            var pointsLen = points.length;
            if(pointsLen == 0){
                return;
            }
            // 创建标注对象并添加到地图
            for(var i = 0;i <pointsLen;i++){
                linePoints.push(new BMap.Point(points[i].lng,points[i].lat));
            }
            //连接所有点
            map.addOverlay(new BMap.Polyline(linePoints, {strokeColor: "#00BFFF", strokeWeight: 4, strokeOpacity: 1}));

            //显示小车子
            var myIcon = new BMap.Icon("/static/app/img/dingwei1.png", new BMap.Size(30, 45));//标记图标
            car = new BMap.Marker(points[0],{icon:myIcon});
            car.setLabel(label);
            map.addOverlay(car);

            //点亮操作按钮
            playBtn.disabled = false;
//            resetBtn.disabled = false;

        } }else {   //判断是否有轨迹（否）
            map = new BMap.Map("container");// 创建Map实例
            var point =new BMap.Point(116.4037447556,39.9150707282);
            map.centerAndZoom(point,10);
            $('.tishi').css('display','inline-block')
//
            $('#controller').css('display','none')
            $('.bottom').css('display','none')

        }
        //播放
        function play() {
            playBtn.disabled = true;
            pauseBtn.disabled = false;
            var point = points[index];
            if(index > 0) {
                map.addOverlay(new BMap.Polyline([points[index - 1], point], {strokeColor: "red", strokeWeight: 1, strokeOpacity: 1}));
            }
            $('.address').text(address[index]); $('.getime').text(time[index]);  $('.wifi span').text(wifi[index]);
            car.setPosition(point);
            index++;
                map.panTo(point); //地图播放跟随
            if(index < points.length) {
                timer = window.setTimeout("play(" + index + ")",$shudu);
                $('#play').css('display','none');
                $('#pause').css('display','inline-block')
            } else {
                playBtn.disabled = true;
                pauseBtn.disabled = true;
                map.panTo(point);
                $('#play').css('display','inline-block');
                $('#pause').css('display','none');
                reset();
            }
        }
        //暂停
        function pause() {
            playBtn.disabled = false;
            pauseBtn.disabled = true;

            if(timer) {
                window.clearTimeout(timer);
            }
            $('#pause').css('display','none');
            $('#play').css('display','inline-block');
        }
        //重置
        function reset() {
            playBtn.disabled = false;
            pauseBtn.disabled = true;

            if(timer) {
                window.clearTimeout(timer);
            }
            index = 0;
            car.setPosition(points[0]);
            map.panTo(centerPoint);
        }

    function ddfg() {
        if( $('.fdfd').css('display')=='none'){
            $('.fdfd').css('display','block')
        }else {
            $('.fdfd').css('display','none')
        }
    }

    function xuhu(obj,imei) {
        $(obj).css('color','red')
        $('#imei').val(imei);
        if( $('.fdfd').css('display')=='none'){
            $('.fdfd').css('display','block')
        }else {
            $('.fdfd').css('display','none')
        }
        $gettime =$('.gettime').val();
        window.location.href="{:url('Map/route')}?imei="+imei +"&gettime="+$gettime;
    }
    //切换时间
    function shijan() {
        $gettime =$('.gettime').val();
           $imei  = $('#imei').val();
        window.location.href="{:url('Map/route')}?imei="+$imei +"&gettime="+$gettime;
    }

    //获取rul地址参数
    function getParam(paramName) {     paramValue = "", isFound = !1;     if (this.location.search.indexOf("?") == 0 && this.location.search.indexOf("=") > 1) {         arrSource = unescape(this.location.search).substring(1, this.location.search.length).split("&"), i = 0;         while (i < arrSource.length && !isFound) arrSource[i].indexOf("=") > 0 && arrSource[i].split("=")[0].toLowerCase() == paramName.toLowerCase() && (paramValue = arrSource[i].split("=")[1], isFound = !0), i++     }     return paramValue == "" && (paramValue = null), paramValue }


    //播放速度样式
    function sudu() {
       if($('.dropdown-content').css('display')=='none'){

           $('.dropdown-content').css('display','block')
       }else {
           $('.dropdown-content').css('display','none')
       }

    }



</script>
</html>